﻿<html>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" >
<head>

  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>写文章 - 烫烫博客管理</title>
  <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
  <link rel="apple-touch-icon-precomposed" href="/img/icon/icon.png">
  <link rel="Shortcut Icon" href="favicon.ico" type="image/ico">
  <script src="js/jquery-2.1.4.min.js"></script>
<!--[if gte IE 9]>
  <script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="/js/html5shiv.min.js" type="text/javascript"></script>
  <script src="/js/respond.min.js" type="text/javascript"></script>
  <script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
  <script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
</head>

<body class="user-select">
<section class="container-fluid">
  <header>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" href="/">烫烫</a> </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/logout" onClick="if(!confirm('是否确认退出？'))return false;">退出登录</a></li>
          </ul>
          <form action="" method="post" class="navbar-form navbar-right" role="search">
            <div class="input-group">
              <input type="text" class="form-control" autocomplete="off" placeholder="键入关键字搜索" maxlength="15">
              <span class="input-group-btn">
              <button class="btn btn-default" type="submit">搜索</button>
              </span> </div>
          </form>
        </div>
      </div>
    </nav>
  </header>
  <div class="row">
    <aside class="col-sm-3 col-md-2 col-lg-2 sidebar">
      <ul class="nav nav-sidebar">
        <li><a href="/adminindex.html">关于</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li class="active"><a href="/show-article.html">文章</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li ><a href="/category.html">分类</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="/tag.html">标签</a></li>
      </ul><ul class="nav nav-sidebar">
      <li><a href="/link.html">友链</a></li>
    </ul>
    </aside>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-lg-10 col-md-offset-2 main" id="main">
      <div class="row">
        <form class="add-article-form">
          <div class="col-md-9">
            <h1 class="page-header">撰写新文章</h1>
            <div class="form-group">
              <label for="article-title" class="sr-only">标题</label>
              <input type="text" id="article-title" name="title" class="form-control" placeholder="在此处输入标题" required autofocus autocomplete="off">
            </div>
            <div class="form-group">
              <label for="editor" class="sr-only">内容</label>
              <div id="div1" class="toolbar">
              </div>
              <div id="editor" class="text">
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <h1 class="page-header">操作</h1>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>分类</span></h2>
              <div class="add-article-box-content">



                <select id="category-options" >
                </select>



              </div>
            </div>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>标签</span></h2>


              <div id="tag-options" class="add-article-box-content">
              </div>


            </div>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>标题图片</span></h2>
              <div class="add-article-box-content">
                <input type="text" class="form-control" placeholder="点击按钮选择图片" id="pictureUpload" name="titlepic" autocomplete="off">
              </div>
              <div class="add-article-box-footer">
                <button class="btn btn-default" type="button" ID="upImage">选择</button>
              </div>
            </div>

            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>发布</span></h2>
              <div class="add-article-box-content">
                <input type="text" class="form-control" placeholder="设置推荐值"  id="recommend-value" autocomplete="off">
              </div>
              <div class="add-article-box-footer">
                <button class="btn btn-primary" type="button" onclick="addOrUpdateArticle()" id="submit">发布</button>
              </div>
            </div>

          </div>

        </form>
      </div>
    </div>
  </div>
</section>

<script src="/js/bootstrap.min.js"></script>
<script src="/js/admin-scripts.js"></script>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="/js/wangEditor.js" charset="UTF-8"></script>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#div1','#editor');
    // 或者 var editor = new E( document.getElementById('editor') )
    /* 处理上传图片的controller路径 */
    editor.customConfig.uploadImgServer = '../article/uploadImgg';
    editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0
    editor.create();


    /* 定义上传图片的默认名字 */
    editor.customConfig.uploadFileName = 'myFileName';

    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            alert("上传成功...")
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            alert("上传fail...")
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            alert("上传出错...")
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            alert("上传超时...")
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            alert(result)
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.url
            insertImg(url)

            // result 必须是一个 JSON 格式字符串！！！否则报错
        }

    }


</script>
<script src="/js/public-method.js?ver=1"></script>
<script>
  function addOrUpdateArticle() {
      //尝试读取id，如果为null，说明是新添文章
      var id=getQueryString("id");
      //读取标题
      var titlee=document.getElementById("article-title").value;
      // 读取 html
      var content=editor.txt.html();
      //读取选中的分类
      obj = document.getElementById("category-options");
      var category=obj.options[obj.selectedIndex].value;
      //读取选中的标签
      checkArry = document.getElementsByName("tags");
      var tags="";
      for (var i = 0; i < checkArry.length; i++) {
          if(checkArry[i].checked == true){
              tags+=checkArry[i].value+",";
          }
      }
      //读取推荐值
      var recommend=document.getElementById("recommend-value").value;

      if(titlee==""||tags==""){
          alert("请填写标题或标签");
          return;
      }

      $.ajax({
          url:"/article/addOrUpdateArticle",
          type: "post",
          data:{
                  "id": id,
                  "title":titlee,
                  "content":content,
                  "category":category,
                  "tags":tags,
                  "reommend":recommend
                },
          success: function (data) {

              if(data=="success"){
                  alert("操作成功")
              }else{
                  alert(data);
              }

          },
          error:function (data) {
              alert("操作失败")
          }
      })
  }

  //修改文章 ，要先获取文章原本内容
  function getArticle(id) {
      $.ajax({
          url: "/article/selectArticle",
          type:"post",
          data:{
                  "id" : id,
                },
          success: function (data) {
              //设置标题
              $("#article-title").val(data.title);
              //设置内容
              editor.txt.html(data.content);
              //设置分类
              $("#category-options").find("option[value='"+data.categoryid+"']").attr("selected","selected");
              //设置标签
              var tagbox=window.document.getElementsByName("tags");
              for(i in data.tags){
                  for(j=0;j<tagbox.length;j++){
                      if(data.tags[i].tagid==tagbox[j].value){
                          tagbox[j].checked=true;
                      }
                  }
              }
              //设置推荐值
              $("#recommend-value").val(data.weight);
          },
          error: function (data) {
              alert("获取文章信息失败");
          }

      })
  }


  //查询所有分类
  function getCategories() {
      $.ajax({
          url :  "/category/selectAllCategories",
          type:"post",
          data:{ },
          success: function (data) {
              var str="";
              for(i in data){
                  str+="<option value='"+data[i].categoryid+"'>"+data[i].categoryname+" ("+data[i].categoryalias+")</option>";
              }
              var selectbody=window.document.getElementById("category-options");
              selectbody.innerHTML=str;
          },
          error: function () {
              window.alert("查询分类失败");
          }

      })
  }
  //查询所有标签
  function getTags() {
      $.ajax({
          url :"/tag/getAllTags",
          type:"post",
          data:{ },
          success:function (data) {
              var str="";
              for(i in data){
                  str+="<label><input type=\"checkbox\" name=\"tags\" value='"+data[i].tagid+"'>"+data[i].tagname+" ("+data[i].tagalias+" )</label><br>";
              }
              var tagbody=window.document.getElementById("tag-options");
              tagbody.innerHTML=str;

              //查询文章的详细信息
              var str=getQueryString("id");
              if(str!=null){
                  getArticle(str);
              }
          },
          error:function () {
              window.alert("查询标签失败");
          }
      })
  }



  $(document).ready(function read(e) {
      getCategories();
      getTags();

  });


</script>
<style type="text/css">
  .toolbar {
    border: 1px solid #ccc;
  }
  .text {
    height: 1000px;
  }
</style>

</body>
</html>
